<script src="@/js/wenhua/liushisigua.js"></script>

<template>

  <div class="liushisigua">
    <div class="margins">

      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem to="/wenhua">
              <Icon type="logo-buffer" />
              文化
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              六十四卦
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 猜你想看 -->
        <div class="prediction">
          猜你想看：
          <router-link to="/wenhua/bagua">
            八卦
            <Icon type="ios-open-outline" />
          </router-link>
        </div>

        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div class="data">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-affix :offset="125">
              <el-card shadow="never" class="left">
                <div>
                  <button class="introduce-button" @click="pageTable = 0">
                    基础介绍
                    <span v-show="pageTable === 0">
                      <Icon type="ios-arrow-dropright-circle" />
                    </span>
                  </button>
                </div>
                <br />
                <div>
                  <button class="details-button" @click="pageTable = 1">
                    详细解读
                    <span v-show="pageTable === 1">
                      <Icon type="ios-arrow-dropright-circle" />
                    </span>
                  </button>
                </div>
              </el-card>
            </el-affix>
          </el-col>
          <el-col :span="21">
            <el-card shadow="always" class="right">
              <div v-show="pageTable === 0" class="content">
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>何谓六十四卦？</span>
                  </el-tag>
                </div>
                <div>
                  <div>六十四卦是透过八卦与八卦的组合，去反应六十四种不同的事务、情境、现象、特定环境下的人生哲理、以及大自然的运作法则。</div>
                  <div>每一卦都会有六爻和爻辞，每卦六爻，共三百八十四爻，加上乾、坤两卦各有一用爻，共三百八十六种对应的状态，透过这些变化可以知道世间万物的运作以及人生的哲理。</div>
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>六十四卦的起源</span>
                  </el-tag>
                </div>
                <div>
                  <div>
                    <div>六十四卦的起源可以追溯到中国古代的《易经》，是中华民族传统思想文化中自然哲学与人文实践的理论根源，被誉为“大道之源”。</div>
                  </div>
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>六十四卦的形成</span>
                  </el-tag>
                </div>
                <div>
                  <div>
                    据《史记·周本纪》记载，六十四卦最初是由周文王（西伯昌）在囚禁期间，通过潜心研究易学八卦，将八卦相叠推演而来。西伯昌被崇侯虎陷害而被殷帝纣囚禁在羑里七年，在此期间创立了六十四卦，包括乾为天、坤为地、水雷屯、山水蒙等。这些卦象代表了宇宙万物的变化与规律，体现了古代汉民族的思想与智慧。
                  </div>
                </div>
              </div>
              <div v-show="pageTable === 1" class="content">
                <div>
                  <el-input clearable maxlength="3" show-word-limit v-model="queryData" style="width: 300px"
                    placeholder="请输入六十四卦名称（如：乾卦）">
                    <template #prefix>
                      <el-icon>
                        <Edit />
                      </el-icon>
                    </template>
                  </el-input>
                  <span>
                    &nbsp;
                    <Button icon="ios-search" @click="">搜索</Button>
                  </span>
                  <span class="page">
                    <el-pagination small background class="pageList" :pager-count="3" :page-sizes="[10, 30, 50, 70, 90]"
                      layout="total, sizes, prev, pager, next, jumper" :total="dataTotal" :current-page.sync="page"
                      :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                  </span>
                  <div class="divider">
                    <el-divider />
                  </div>
                </div>

                <div v-show="data && data.length !== 0">
                  <div v-for="item in data" :key="item" class="for">
                    <el-card shadow="hover">
                      <div class="name">【<b v-html="showDataMethod(item.name)"></b>】</div>

                      <div class="gua">
                        <div class="naming">
                          <span class="ym">爻名</span>
                          <span class="gx">卦象</span>
                          <span class="yc">爻辞</span>
                        </div>
                        <div class="yao-name" v-if="item.yaoName">
                          <div v-for="index in sixGuaIndex.length" :key="index">
                            {{ item.yaoName.split('.')[sixGuaIndex[index - 1]] }}
                          </div>
                        </div>
                        <div class="yao-as" v-if="item.guaAs">
                          <div>{{ item.guaAs }}</div>
                        </div>
                        <div class="yao-ci" v-if="item.yaoCi">
                          <div v-for="index in sixGuaIndex.length" :key="index">
                            <b>{{ item.yaoCi.split('.')[sixGuaIndex[index - 1]] }}</b>
                          </div>
                        </div>
                      </div>

                      <!-- <div>
                        <b>卦象：</b>
                        {{ item.guaAs }}
                        <el-tooltip class="box-item" effect="dark" placement="right">
                          <template #content>
                            <div style="zoom: 5; margin: 7px 0 5px 0;">
                              {{ item.guaAs }}
                            </div>
                          </template>
                          <a :href="searchLink + item.name" target="_blank">
                            <Icon type="ios-search" />
                          </a>
                        </el-tooltip>
                      </div> -->

                      <div style="float: left; margin-top: -25px;">
                        <div>
                          <b>特点：</b>
                          {{ item.characteristic }}
                        </div>
                        <div>
                          <b>含义：</b>
                          {{ item.meaning }}
                        </div>
                      </div>

                      <br />
                      <!-- <div>
                        <b>万物类象：</b>
                        <div class="leixiang">
                          <span v-for="lx in item.leiXiang.length" :key="lx">
                            {{ item.leiXiang.split("#")[lx] }}
                          </span>
                        </div>
                      </div> -->
                      <div class="index">
                        {{ item.id }}
                      </div>
                    </el-card>
                  </div>
                </div>
                <div v-show="data.length === 0" class="null">
                  暂无数据
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>

</template>

<style lang="less" scoped src="@/css/wenhua/liushisigua.scss"></style>
